<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <label><input type="checkbox" name="sports" value="football"> Football</label><br>
    <label><input type="checkbox" name="sports" value="basketball"> Basketball</label><br>
    <label><input type="checkbox" name="sports" value="badminton"> Badminton</label><br>
    <label><input type="checkbox" name="sports" value="pingpong"> Ping-pong</label><br>
    </form>
    <button onclick="selectAll()">Select All</button>
    <button onclick="unselectAll()">Unselect All</button>
    <button onclick="invertSelection()">Invert Selection</button>
    <button onclick="printSelection()">Print Selection</button>





    <script>
        function selectAll() {
            var checkboxes = document.getElementsByName("sports");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = true;
            }
        }

        function unselectAll() {
            var checkboxes = document.getElementsByName("sports");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = false;
            }
        }


        function invertSelection() {
            var checkboxes = document.getElementsByName("sports");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked =!checkboxes[i].checked;
            }
        }

        function printSelection() {
            var checkboxes = document.getElementsByName("sports");
            var spor=[];
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    spor.push(checkboxes[i].value);
                }
            }
            console.log(spor);
        }











    </script>
</body>

</html>